<template>
	<view class="battle-setting" v-if="show">
		<u-modal v-model="show" width="100%" :showTitle="false" :mask-close-able="false" :show-confirm-button="false">
			<view class="battle-setting-content">
				<mBack ref="mBack1" :name="backName" @getGameResult="handleBackClick"></mBack>
				<view class="role-img-show">
					<image class="item-img" :src="activeRole.image" mode="aspectFill"></image>
				</view>
				<view class="role-name-change flex-row-start-center" v-if="componentType=='groupMain'"
					@click="handleToChangeRole">
					<view class="role-name">{{activeRole.roleName}}·{{activeRole.name}}</view>
					<!-- <view class="cloumn-line"></view> -->
					<!-- 				<view class="change-role-icon flex-row-center-center">
						<image class="item-img"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/947bee2d67494c37946acb9d1988e42b.png"
							mode="aspectFill"></image>

					</view> -->
					<view class="cloumn-line-left"></view>
					<view class="row-line top"></view>
					<view class="row-line bottom"></view>
				</view>
				<view class="skill-list flex-column-start-center"
					v-if="componentType=='groupMain'||componentType=='chooseRole'">
					<view class="sp-item" v-for="(item,index) in skillList" :key="index">
						<image class="item-img" v-if="item.image" :src="item.image" style="border-radius: 50%;"
							mode="aspectFill"></image>
					</view>
					<view class="sp-detail-btn flex-row-center-center">技 能</view>
				</view>

				<view class="prop-list flex-column-start-center"
					v-if="componentType=='groupMain' ||componentType=='chooseRole'">
					<view class="sp-item flex-row-center-center" :class="{'prop-pushed':item.image}"
						v-for="(item,index) in propList" :key="index">
						<image class="prop-add-icon" v-if="!item.image"
							src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
							mode="aspectFill"></image>
						<image class="item-img" v-if="item.image" :src="item.image" mode="aspectFill"></image>

					</view>
					<view class="sp-detail-btn flex-row-center-center">装 备</view>
				</view>

				<view class="power-box flex-row-center-center" v-if="componentType=='groupMain'">
					<view class="power-inner flex-row-center-center">
						<view class="left-tip flex-row-start-center">
							<view class="one-tip">舞</view>
							<view class="two-tip">力</view>
						</view>
						<view class="right-num">244523</view>
						<view class="line-box top-line"></view>
						<view class="line-box bottom-line"></view>
					</view>
				</view>

				<view class="choose-role flex-column-start-center bg-blur" v-if="componentType=='chooseRole'">
					<view class="role-name-tab">
						<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap; "
							class="scroll-content-x " :show-scrollbar="false" :scroll-with-animation="true">
							<view class="role-tab-item" @click="handleRoleNameTabClick(item,index)"
								:class="{'act-role-tab':actRoleTabIndex==index}" v-for="(item,index) in roleTabs"
								:key="index">
								<view class="tab-name">{{item}}</view>
							</view>
						</scroll-view>
					</view>

					<view class="scroll-content-role">
						<view class="role-line line-bottom"></view>
						<view class="role-line line-top"></view>
						<scroll-view ref="scrollView" :scroll-x="true" style="white-space: nowrap; "
							class="scroll-content-x " :show-scrollbar="false" :scroll-with-animation="true">

							<view class="role-list flex-row-start-center">
								<view class="role-item" v-for="(item,index) in useRoleList" :key="index"
									@click="handleRoleChooseClick(item,index)">
									<image class="item-img role-radius" :src="item.image" mode="aspectFill"></image>

									<view class="role-item-name flex-row-center-center">{{item.roleName}}·{{item.name}}
									</view>
									<view class="role-choose-masker" v-if="item.isChoose">

									</view>
								</view>
								<view class="role-item" style="background-color: transparent;width: 1rpx;opacity: 0;">
								</view>
							</view>
						</scroll-view>
					</view>

					<view class="role-btn-box flex-row-center-center">
						<view class="confirm-btn flex-row-center-center" @click="handleChooseRoleConfirm">确 定</view>
					</view>
				</view>

				<view class="card-setting-modal " v-if="componentType=='groupChange'">
					<!-- <mBack ref="mBack" :name="backName" @getGameResult="handleBackClick"></mBack> -->
					<view class="card-setting-content flex-column-start-center">
						<view class="top-box"></view>
						<view class="card-slots flex-row-center-center">
							<view class="main-card-list flex-row-between-start">
								<view class="main-card-item flex-row-center-center"
									@click="handleSettingMainCardItemClick(item,index)"
									:class="{'main-card-item-pushed':item.image}"
									v-for="(item,index) in  mainCardSlotList" :key="index">
									<image class="main-card-add-icon" v-if="!item.image"
										src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
										mode="aspectFill"></image>


									<view class="card-content" v-if="item.image"
										:class="{'green-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'blue-card':item.RarityLevel==3,'purple-card':item.RarityLevel==4}">
										<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
											<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
												mode="aspectFill">
											</image>
										</view>
										<image class="item-img" v-if="item.image" :src="item.image" mode="aspectFill">
										</image>
										<view class="bottom-info flex-column-end-center" v-if="item.name">
											<view class="top-start flex-row-center-center">
												<view class="start-item"
													v-for="(sitem,sindex) in getStartList(item.start,5)" :key="sindex">
													<image class="start-img" v-if="sitem.active"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
														mode="aspectFill"></image>
													<image class="start-img" v-else
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
														mode="aspectFill"></image>
												</view>
											</view>
											<view class="bottom-name flex-row-center-center">
												{{item.roleName}}·{{item.name}}
											</view>
										</view>
										<view class="level-number" v-if="item.level">
											Lv.<text class="level-text">{{item.level}}</text>
										</view>





									</view>

								</view>
							</view>

						</view>
						<view class="setting-tip-box flex-row-center-center">

							<view class="line"></view>
							<view class="center-text">
								<!-- 点击选择<text class="text-color">出征舞姬</text>和<text class="text-color">装备道具</text> -->
								<text class="text-color">同一编队</text>
								只能选择
								<text class="text-color">同一角色</text>
								的舞姬
							</view>
							<view class="line"></view>
						</view>
						<view class="setting-cards-data flex-row-center-center">
							<view class="blur-box"></view>
							<scroll-view ref="scrollView" :scroll-y="true" class="scroll-content-y"
								:show-scrollbar="false" :scroll-with-animation="true">
								<view class="setting-card-list flex-row-between-start">

									<view class="setting-card-item card-content" v-for="(item,index) in cardList"
										:key="index" @click="handleCardItemClick(item,index)"
										:class="{'empty-card':item.isEmpty,'green-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'blue-card':item.RarityLevel==3,'purple-card':item.RarityLevel==4}">
										<view class="rarity-level" v-if="item.RarityLevel">
											<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
												mode="aspectFill">
											</image>
										</view>
										<image class="item-img" :src="item.image" mode="aspectFill"></image>
										<view class="bottom-info flex-column-end-center">
											<view class="top-start flex-row-center-center">
												<view class="start-item"
													v-for="(sitem,sindex) in getStartList(item.start,5)" :key="sindex">
													<image class="start-img" v-if="sitem.active"
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
														mode="aspectFill"></image>
													<image class="start-img" v-else
														src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
														mode="aspectFill"></image>
												</view>
											</view>
											<view class="bottom-name flex-row-center-center">
												{{item.roleName}}·{{item.name}}
											</view>
										</view>
										<view class="level-number" v-if="item.level">
											Lv.<text class="level-text">{{item.level}}</text>
										</view>

										<view class="choosed-masker flex-row-center-center" v-if="item.isChoose">
											<image class="choosed-card-img"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/da3685993a7648459b4dac5039e04c66.png"
												mode="aspectFill"></image>
										</view>
									</view>


								</view>
							</scroll-view>
						</view>

						<view class="seeting-bttom-btns flex-row-between-center">
							<view class="confirm-btn setting-clear-btn  flex-row-center-center"
								@click="handleClearMainSlotCards">清 空</view>
							<view class="setting-confirm-btn confirm-btn flex-row-center-center"
								@click="handleCardSlotConfirm">
								保 存</view>
						</view>

					</view>


				</view>

				<view class="main-card-btn flex-column-start-center bg-blur" v-if="componentType=='groupMain'">
					<view class="group-name flex-column-center-center">舞姬编队</view>
					<view class="main-card-list flex-row-center-center">
						<view class="main-card-item flex-row-center-center" @click="handleMainCardItemClick(item,index)"
							:class="{'main-card-item-pushed':item.image}" v-for="(item,index) in  mainCardSlotList"
							:key="index">

							<image class="main-card-add-icon" v-if="!item.image"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5ed0ed0dbe4446b2ad415e9b8c841483.png"
								mode="aspectFill"></image>

							<view class="card-content" v-if="item.image"
								:class="{'green-card':item.RarityLevel==1,'orange-card':item.RarityLevel==2,'blue-card':item.RarityLevel==3,'purple-card':item.RarityLevel==4}">
								<view class="rarity-level flex-row-start-center" v-if="item.RarityLevel">
									<image class="rl-img" :src="handleReturnRarityLevelUrl(item.RarityLevel)"
										mode="aspectFill">
									</image>
								</view>
								<image class="item-img main-card-img" v-if="item.image" :src="item.image"
									mode="aspectFill">
								</image>
								<view class="bottom-info flex-column-end-center" v-if="item.name">
									<view class="top-start flex-row-center-center">
										<view class="start-item" v-for="(sitem,sindex) in getStartList(item.start,5)"
											:key="sindex">
											<image class="start-img" v-if="sitem.active"
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2ebd9f516e784cc8a2548418ad582a5c.png"
												mode="aspectFill"></image>
											<image class="start-img" v-else
												src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/7dcdf112c1e14b4e88da52afcc3b96bb.png"
												mode="aspectFill"></image>
										</view>
									</view>
									<view class="bottom-name-content"></view>
									<view class="bottom-name flex-row-center-center">
										<view class="name-content">
											{{item.roleName}}·{{item.name}}
										</view>
									</view>
								</view>
								<view class="level-number flex-row-end-center" v-if="item.level">
									Lv.<text class="level-text">{{item.level}}</text>
								</view>
							</view>



						</view>
					</view>
					<view class="main-bottom-btn flex-row-between-center">
						<!-- @click="handleToChangeRole" -->
						<view class="jump-change-role" @click="handleToChangeRole">
							<image class="item-img"
								src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/294a8fa07e3048a080b144ca939a1634.png"
								mode="aspectFill"></image>
						</view>

						<view class="all-in-slot confirm-btn   flex-row-center-center" @click="handleCardsAllIn">一键上阵
						</view>
						<view class="start-btn confirm-btn flex-row-center-center" @click="handleStart"
							v-if="needStartGame">
							开始挑战</view>

						<view class="start-btn confirm-btn flex-row-center-center" @click="handleStart"
							v-if="!needStartGame">
							保存编队
						</view>
					</view>


				</view>

			</view>

			<!-- 
		<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241016/VIDd634c859/VIDd634c859.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"></video> -->
		</u-modal>
	</view>
</template>

<script>
	import {
		forEach
	} from "../../lib/request/utils"
	import mBack from "@/components/m-back/index.vue"
	export default {
		props: {
			needStartGame: {
				type: Boolean,
				default: true
			}
		},
		components: {
			mBack
		},
		computed: {
			isChooseIds() {
				let arr = this.mainCardSlotList.map((item, index) => {
					if (item) {
						return item.id
					} else {
						return ""
					}
				})
				return arr
			}
		},
		watch: {
			isChooseIds: {
				handler(newVal, oldVal) {
					// console.log("被选中的id们", newVal);
					this.handleUpdateCardStatus()
				},
				deep: true,
				immediate: true
			},
			componentType: {
				handler(newVal, oldVal) {
					if (newVal == 'groupChange') {
						this.backName = "舞姬编队"
					} else {
						this.backName = ""
					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				backName: "",
				show: true,
				actRoleTabIndex: 0,
				componentType: "groupMain", // chooseRole groupMain groupChange
				cardList: [{
						id: 0,
						name: "白领制服",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "person",
						start: 3,
						RarityLevel: 4,
						level: 30
					},
					{
						id: 1,
						name: "制服诱惑",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "person",
						start: 5,
						RarityLevel: 4,
						level: 31
					},
					{
						id: 2,
						name: "清纯可爱",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "person",
						start: 4,
						RarityLevel: 4,
						level: 28
					},
					{
						id: 3,
						name: "魅力米娜",
						roleName: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 30
					},
					{
						id: 4,
						name: "舞力全开",
						roleName: "米娜",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						type: "person",
						start: 3,
						RarityLevel: 3,
						level: 33
					},
					{
						id: 5,
						name: "幸运女神",
						roleName: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						type: "person",
						start: 5,
						RarityLevel: 3,
						level: 35
					},
					{
						id: 6,
						name: "泳装教练",
						roleName: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						type: "person",
						start: 4,
						RarityLevel: 2,
						level: 32
					},
					{
						id: 7,
						name: "兔兔警官",
						roleName: "妙陈",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/d82a4c86df524fdb82088d48754ea85e.png",
						type: "person",
						start: 3,
						RarityLevel: 2,
						level: 28
					},
				],
				empatyCardList: [{
						isEmpty: true,
						RarityLevel: 0,
					},
					{
						isEmpty: true,
						RarityLevel: 0,
					},
					{
						isEmpty: true,
						RarityLevel: 0,
					},
					{
						isEmpty: true,
						RarityLevel: 0,
					},
				],
				mainCardSlotList: [{
						id: 0,
						name: "白领制服",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						type: "person",
						start: 3,
						RarityLevel: 4,
						level: 30
					},
					{
						id: 1,
						name: "制服诱惑",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						type: "person",
						start: 5,
						RarityLevel: 4,
						level: 31
					},
					{
						id: 2,
						name: "清纯可爱",
						roleName: "秘书",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						type: "person",
						start: 4,
						RarityLevel: 4,
						level: 28
					},
					"",
					"",
					"",
				],
				skillList: [{
						name: "星愿",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c91a5843e804604b5a91079d6677be1.png",
					},
					{
						name: "流萤",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/27d934d181e3476895281a34ee6e3c5e.png",
					},
					{
						name: "雨落之屏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/112732c233aa4e4eb0c5c96b1cdde31e.png",
					}, {
						name: "纸刃",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/84ffe00f0625475c9599206f220d4fdc.png",
					},
				],
				propList: [{
						name: "星愿",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/e583cc7e76d74f8fa1155dc1ddc2a5ac.png",
					},
					{
						name: "流萤",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9fe056b27df44b03a156532100eab8ea.png",
					},
					{
						name: "雨落之屏",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/52a8929435334703a976df3284094614.png",
					}, {
						name: "纸刃",
						image: "",
					},


				],
				roleTabs: [
					"全部",
					"秘书",
					"米娜",
					"妙陈",
				],
				useRoleList: [],
				activeRole: {
					name: "制服诱惑",
					roleName: "秘书",
					start: 3,
					image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
					isEmpty: false,
					locked: false,
					storyId: "S025YAY",
					level: 30,
					RarityLevel: 4,
					isChoose: false,
				},
				roleList: [{
						name: "制服诱惑",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg",
						isEmpty: false,
						locked: false,
						storyId: "S025YAY",
						level: 30,
						RarityLevel: 4,
						isChoose: false,
					},
					{
						name: "泳装派对",
						roleName: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/5c6ee974733046a795a0c0e7cc3af818.jpg",
						isEmpty: false,
						locked: false,
						level: 31,
						RarityLevel: 4,
						isChoose: false,
					},
					{
						name: "幸运女神",
						roleName: "妙陈",
						storyId: "S020WKU",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2bbb616d72a9447aac0a9422078eca6d.jpg",
						isEmpty: false,
						locked: false,
						level: 32,
						RarityLevel: 3,
						isChoose: false,
					},
					{
						name: "性感",
						roleName: "秘书",
						start: 4,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8d48c9e5c0fc4bb7a9d78d84400b079b.jpg",
						isEmpty: false,
						locked: true,
						storyId: "S025YAY",
						level: 28,
						RarityLevel: 3,
						isChoose: false,
					},
					{
						name: "米娜",
						roleName: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/ca8d18090cac4ef9903e213f2d2d3402.jpg",
						isEmpty: false,
						locked: true,
						level: 28,
						RarityLevel: 2,
						isChoose: false,
					},
					{
						name: "妙陈",
						roleName: "妙陈",
						storyId: "S020WKU",
						start: 2,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/f6a9b4f1e3494982946b61698a4258f3.jpg",
						isEmpty: false,
						locked: true,
						level: 28,
						RarityLevel: 2,
						isChoose: false,
					},
					{
						name: "秘书",
						roleName: "秘书",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/14784ddce0aa47f6b44d09e769e371e3.jpg",
						isEmpty: false,
						locked: true,
						storyId: "S025YAY",
						level: 28,
						RarityLevel: 2,
						isChoose: false,
					},
					{
						name: "米娜",
						roleName: "米娜",
						storyId: "S018ICN",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/78add5080d4f4a229f87daa847caad2e.jpg",
						isEmpty: false,
						locked: true,
						level: 28,
						RarityLevel: 2,
						isChoose: false,
					},
					{
						name: "妙陈",
						roleName: "妙陈",
						storyId: "S020WKU",
						start: 3,
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/2c2955b41ebf45e9ac2112f219cd7373.jpg",
						isEmpty: false,
						locked: true,
						level: 28,
						RarityLevel: 1,
						isChoose: false,
					},

				]
			}
		},
		mounted() {
			// this.cardList = this.cardList.concat(this.empatyCardList)
			this.handleRoleNameTabClick('全部', 0)
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			handleStart() {
				this.$emit("result")
				this.close()
			},
			handleCardsAllIn() {
				let emptyLength = this.mainCardSlotList.filter((item, index) => {
					return !item
				}).length
				let notChooseArr = this.cardList.filter((item, index) => {
					return !item.isChoose
				})
				let pushArr = notChooseArr.length >= emptyLength ? [...notChooseArr].splice(0, emptyLength) : [...
					notChooseArr
				]

				pushArr.forEach((item, index) => {
					this.mainCardSlotList.some((mitem, mindex) => {
						if (!mitem) {
							this.$set(this.mainCardSlotList, mindex, item)
							return true
						}
						return false

					})
				})

				console.log("空缺长度是", emptyLength, pushArr);
			},
			handleCardSlotConfirm() {
				this.componentType = "groupMain"
			},
			handleClearMainSlotCards() {
				this.mainCardSlotList.forEach((item, index) => {
					this.$set(this.mainCardSlotList, index, "")
				})
			},
			handleCardItemClick(item, index) {
				let ids = [...this.isChooseIds]
				if (ids.includes(item.id)) {
					let index = ids.indexOf(item.id)
					this.mainCardSlotList[index] = ""
					this.$set(this.mainCardSlotList, index, "")
					console.log("变化后", this.mainCardSlotList);
				} else {
					let index = ids.indexOf("")
					this.$set(this.mainCardSlotList, index, item)
				}
			},
			handleUpdateCardStatus() {
				let ids = [...this.isChooseIds]
				this.cardList.forEach((item, index) => {
					if (ids.includes(item.id)) {
						item.isChoose = true
					} else {
						item.isChoose = false
					}
				})
			},
			handleBackClick() {
				if (this.componentType != 'groupMain') {
					this.componentType = 'groupMain'
				} else {
					this.close()
				}
			},
			handleSettingMainCardItemClick(item, index) {
				this.$set(this.mainCardSlotList, index, "")
			},
			handleMainCardItemClick(item, index) {
				this.componentType = 'groupChange'
			},
			getStartList(number, total = 5) {
				let arr = []

				for (let i = 0; i < number; i++) {
					arr.push({
						active: true
					})
				}

				for (let i = 0; i < (total - number); i++) {
					arr.push({
						active: false
					})
				}

				return arr

			},
			handleChooseRoleConfirm() {
				this.componentType = 'groupMain'
			},
			handleToChangeRole() {
				this.componentType = 'chooseRole'
			},
			handleRoleChooseClick(item, index) {
				this.roleList.forEach((ritem, rindex) => {
					ritem.isChoose = false
				})
				item.isChoose = true
				this.activeRole = item
				// console.log("当前数据", this.roleList)
			},
			handleReturnRarityLevelUrl(level) {
				let str = ""
				switch (level) {
					case 1:
						str =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/93cd8b6a4c1949a0b6d2d3d1c000385c.png"
						break;
					case 2:
						str =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/758444cd41804eae8906866c80f5efd5.png"
						break;
					case 3:
						str =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/1ee25285760a4ca1b3162331362f01ba.png"
						break;
					case 4:
						str =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/247f5d1c0a5247a487336c52f34a1a76.png"
						break;
					default:
						break;
				}
				return str
			},
			handleRoleNameTabClick(item, index) {
				this.actRoleTabIndex = index

				let resArr = this.roleList.filter((ritem, rindex) => {
					return ritem.roleName == item
				})
				if (resArr.length) {
					this.useRoleList = [...resArr]
				} else {
					this.useRoleList = [...this.roleList]
				}
			}
		}




	}
</script>

<style lang="scss" scoped>
	.battle-setting {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 9999999999999999999999;
		pointer-events: none;

		.battle-setting-content {
			position: relative;
			width: 100vw;
			height: 100vh;
			z-index: 9999999999999999999999;
			pointer-events: none;
		}

		.role-name-change {
			position: absolute;
			left: 30rpx;
			top: 200rpx;
			height: 50rpx;
			// min-width: 90rpx;
			z-index: 10;
			background-image: linear-gradient(to right, rgba(0, 0, 0, .1)0%, rgba(0, 0, 0, .1)60%, rgba(0, 0, 0, 0)100%);
			padding-left: 10rpx;
			padding-right: 30rpx;
			pointer-events: fill;

			.role-name {
				font-size: 20rpx;
				line-height: 50rpx;
				color: #fff;
				// text-shadow: 1rpx 1rpx 1rpx rgba(0, 0, 0, .6);
				margin-right: 15rpx;
			}

			.cloumn-line {
				width: 1rpx;
				height: 25rpx;
				background-color: rgba(255, 255, 255, .8);
				opacity: 0.6;
			}

			.change-role-icon {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				// background-color: rgba(0, 0, 0, .1);
				box-shadow: inset 0rpx 0rpx 6rpx #fff;
				box-sizing: border-box;
				padding: 6rpx;
				margin-left: 15rpx;
			}

			.cloumn-line-left {
				position: absolute;
				left: 0rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 54rpx;
				background-color: rgba(255, 255, 255, .8);
				opacity: 0.6;
			}

			.row-line {
				position: absolute;
				left: 3rpx;
				width: 100%;
				height: 1rpx;
				opacity: 0.6;
			}

			.top {
				top: 0rpx;
				background-image: linear-gradient(to right, rgba(255, 255, 255, .5)0%, rgba(255, 255, 255, .5)60%, rgba(255, 255, 255, 0)100%);
			}

			.bottom {
				bottom: 0rpx;
				background-image: linear-gradient(to right, rgba(0, 0, 0, .1)0%, rgba(0, 0, 0, .1)60%, rgba(0, 0, 0, 0)100%);
			}
		}




		.role-img-show {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			// background-color: pink;
			z-index: 1;
		}

		.skill-list,
		.prop-list {
			position: absolute;
			top: 300rpx;
			width: 90rpx;
			min-height: 300rpx;
			z-index: 9;
			pointer-events: fill;

			.sp-item {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
				background-color: rgba(0, 0, 0, .1);
				border: 1rpx solid rgba(255, 255, 255, .3);
				overflow: hidden;
			}

			.sp-detail-btn {
				width: 90rpx;
				height: 30rpx;
				border-radius: 30rpx;
				box-shadow: inset 0rpx 0rpx 20rpx rgba(255, 255, 255, .8);
				background-color: rgba(0, 0, 0, .1);
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				line-height: 30rpx;
				box-sizing: border-box;
				border: 1rpx solid rgba(255, 255, 255, .8);
				text-shadow: 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
			}


		}

		.skill-list {
			left: 30rpx;
		}

		.prop-list {
			right: 30rpx;

			.sp-item {
				border-radius: 5rpx;

				.prop-add-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.prop-pushed {
				background-color: rgba(255, 255, 255, .3);
				border: none;
			}
		}

		.choose-role,
		.main-card-btn {
			position: absolute;
			left: 0rpx;
			// bottom: 50rpx;
			width: 100%;
			box-sizing: border-box;
			pointer-events: fill;
			z-index: 9;

			.role-btn-box {
				width: 100%;
				margin-top: 20rpx;

				// 

			}



			.role-name-tab {
				position: relative;
				width: 100%;
				height: 40rpx;
				padding: 0rpx 10rpx;

				.role-tab-bottom-line {
					position: absolute;
					left: 0rpx;
					bottom: -2rpx;
					width: 100%;
					height: 2rpx;
					opacity: 0.2;
					box-sizing: border-box;
					padding: 0rpx 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 9;

					.line-center {
						width: 100%;
						height: 100%;
						// background-image: linear-gradient(to right, rgba(255, 255, 255, 0)0%, rgba(255, 255, 255, .8)15%, rgba(255, 255, 255, .8)85%, rgba(255, 255, 255, 0)100%);
						background-color: rgba(255, 255, 255, .8);
						opacity: 0.6;
					}
				}

				.role-tab-item {
					// flex: 1;
					width: 150rpx;
					height: 40rpx;
					display: inline-block;
					text-align: center;
					font-weight: 700;
					color: #fff;
					border-radius: 2rpx;
					overflow: hidden;


					.tab-name {
						font-size: 24rpx;
						line-height: 40rpx;
					}


				}

				.act-role-tab {

					background-color: #f0eeef;
					color: #000;
					animation: bagTabScale 0.2s linear;



				}

				@keyframes bagTabScale {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.1);
					}

					100% {
						transform: scale(1);
					}

				}




			}

			.scroll-content-role {
				width: 100%;
				position: relative;
				background-image: linear-gradient(to right, rgba(0, 0, 0, .0)0%, rgba(0, 0, 0, .2)30%, rgba(0, 0, 0, .2)70%, rgba(0, 0, 0, .0)100%);
			}

			.role-list {
				position: relative;
				height: 200rpx;
				padding: 0rpx 10rpx;



				.role-item {
					position: relative;
					width: 120rpx;
					height: 180rpx;
					border-radius: 6rpx;
					background-color: #fff;
					flex-grow: 0;
					flex-shrink: 0;
					margin-right: 15rpx;
					box-shadow: 0rpx 0rpx 2rpx rgba(255, 255, 255, .6);

					.role-radius {
						border-radius: 6rpx;
					}

					&:last-child {
						margin-right: 10rpx;
					}

					.role-choose-masker {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 100%;
						z-index: 12;
						border-radius: 5rpx;
						box-shadow: inset 0rpx 0rpx 25rpx rgba(255, 255, 255, .8);

					}


					.role-item-name {
						position: absolute;
						left: 0rpx;
						bottom: 0rpx;
						width: 100%;
						height: 30rpx;
						font-size: 12rpx;
						line-height: 12rpx;
						color: #fff;
						background-color: rgba(0, 0, 0, .6);
						border-radius: 0rpx 0rpx 5rpx 5rpx;
					}



				}
			}

			.role-line {
				position: absolute;
				left: 0rpx;
				width: 100%;
				height: 2rpx;
				background-image: linear-gradient(to right, rgba(255, 255, 255, .0)0%, rgba(255, 255, 255, .2)30%, rgba(255, 255, 255, .2)70%, rgba(255, 255, 255, .0)100%);
				// opacity: 0.6;
				z-index: 11;
			}
		}

		.choose-role {
			bottom: 0rpx;
		}

		.main-card-btn,
		.card-slots {
			width: 100%;
			// height: 300rpx;

			.main-card-list {
				width: 100%;

				.main-card-item {
					position: relative;
					width: 100rpx;
					height: 150rpx;
					margin-right: 15rpx;
					border-radius: 6rpx;
					// background-color: #fff;
					// background-color: rgba(255, 255, 255, .5);
					background-color: rgba(0, 0, 0, .1);
					border: 1rpx solid rgba(255, 255, 255, .3);
					overflow: hidden;



					.main-card-img {
						border-radius: 6rpx;
					}

					.main-card-add-icon {
						width: 30rpx;
						height: 30rpx;
					}

					&:last-child {
						margin-right: 0rpx;
					}






				}


				.main-card-item-pushed {
					background-color: none;
					border: none;
				}
			}
		}

		.main-card-btn {
			.main-card-list {
				width: 100%;

				.main-card-item {
					.rarity-level {
						left: 5rpx;
						top: 5rpx;
						width: 45rpx;
						height: 22rpx;
					}

					// 编辑处理
					.level-number {
						position: absolute;
						right: 0rpx;
						top: 2rpx;
						width: 60rpx;
						height: 24rpx;
						font-size: 12rpx;
						line-height: 12rpx;
						padding-right: 5rpx;
					}


					.top-start {
						height: auto;

						.start-item {
							width: 14rpx;
							height: 14rpx;
						}
					}

					.bottom-name {
						position: absolute;
						left: 0rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 120rpx;
						font-size: 12rpx;
						line-height: 12rpx;


						.name-content {
							// width: 100%;
							transform: scale(0.75);
						}

					}

					.bottom-name-content {
						width: 100%;
						height: 28rpx;

					}


				}
			}

			.group-name {
				position: absolute;
				left: 8rpx;
				top: 40rpx;
				width: 24rpx;
				height: 150rpx;
				font-size: 16rpx;
				line-height: 24rpx;
				color: #fff;
				text-align: center;
			}










			.main-bottom-btn {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 40rpx;
				margin-top: 40rpx;

				.jump-change-role {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					box-sizing: border-box;
					margin-right: 20rpx;
					box-shadow: inset 0rpx 0rpx 15rpx rgba(255, 255, 255, .8);
					padding: 8rpx;
				}

				.all-in-slot {
					flex: 1;
					margin-right: 20rpx;
					background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
					color: #646369;
				}


				.start-btn {
					flex: 1;
				}
			}
		}

		.card-setting-modal {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .5);
			backdrop-filter: blur(15rpx);
			z-index: 99;



			.card-setting-content {
				width: 100%;
				height: 100%;

				.top-box {
					width: 100%;
					height: 170rpx;
				}

				.setting-tip-box {
					width: 100%;
					height: 50rpx;
					z-index: 11;

					.line {
						width: 150rpx;
						height: 2rpx;
						background-color: rgba(255, 255, 255, .6);
						opacity: 0.6;
					}

					.center-text {
						font-size: 20rpx;
						height: 100%;
						line-height: 50rpx;
						color: #fff;
						padding: 0 20rpx;
						text-align: center;

						.text-color {
							color: #e5dfb4;
						}
					}

				}


				// 这里
				.card-slots {
					position: none;
					width: 780rpx;
					box-sizing: border-box;
					pointer-events: fill;
					z-index: 9;
					margin-top: 20rpx;

					.main-card-list {
						width: 100%;
						flex-wrap: wrap;
						box-sizing: border-box;
						padding: 0rpx 70rpx;

						.main-card-item {
							width: 180rpx;
							height: 245rpx;
							margin-bottom: 20rpx;
							border-radius: 10rpx;
							overflow: hidden;

							// margin-right: 20rpx;
							&:nth-child(3n) {
								margin-right: 0rpx;
							}

							.item-img {
								border-radius: 10rpx;
							}

							.level-number {
								position: absolute;
								right: 0rpx;
								top: 2rpx;
							}

							.rarity-level {
								left: 5rpx;
								top: 5rpx;
								width: 60rpx;
								height: 28rpx;
							}
						}
					}
				}

				.setting-tip-box {
					width: 100%;
					height: 50rpx;
				}

				.setting-cards-data {
					position: relative;
					flex: 1;
					width: 780rpx;
					overflow: hidden;
					pointer-events: fill;
					margin-top: 20rpx;

					.blur-box {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						width: 100%;
						height: 30rpx;

						background-color: transparent;
						z-index: 9;
					}

					.setting-card-list {
						width: 100%;
						box-sizing: border-box;
						padding: 0rpx 70rpx;
						flex-wrap: wrap;
						pointer-events: fill;

						.setting-card-item {
							position: relative;
							width: 140rpx;
							height: 200rpx;
							border-radius: 10rpx;
							background-color: #fff;
							// margin-right: 10rpx;
							margin-bottom: 15rpx;
							overflow: hidden;
							box-shadow: 0 0 4rpx rgba(0, 0, 0, .6);

							&:nth-child(4n) {
								margin-right: 0rpx;
							}

							.rarity-level {
								left: 8rpx;
								top: 2rpx;
								width: 60rpx;
								height: 30rpx;
								z-index: 20;
							}


							.level-number {
								position: absolute;
								right: 0rpx;
								top: 2rpx;
							}




							.choosed-masker {
								position: absolute;
								left: 0rpx;
								top: 0rpx;
								width: 100%;
								height: 100%;
								z-index: 20;
								border-radius: 10rpx;

								.choosed-card-img {
									width: 30rpx;
									height: 30rpx;
								}

							}
						}
					}
				}

				.seeting-bttom-btns {
					width: 100%;
					height: 150rpx;
					box-sizing: border-box;
					padding: 0rpx 60rpx;
					pointer-events: fill;

					.setting-clear-btn {
						flex: 1;
						background-image: linear-gradient(to right bottom, #f7f7f9 10%, #cacddc 60%, #f7f7f9 90%);
						color: #646369;
						margin-right: 20rpx;
					}

					.setting-confirm-btn {
						flex: 1;
					}
				}


			}




		}






	}

	.rarity-level {
		position: absolute;
		z-index: 10;

		.rl-img {
			width: 100%;
			height: 100%;
		}

	}

	.level-number {
		position: absolute;

		font-size: 16rpx;
		line-height: 16rpx;
		color: #fff;
		z-index: 12;
		width: 80rpx;
		height: 26rpx;
		line-height: 26rpx;
		padding-right: 10rpx;
		background: linear-gradient(to left, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 100%);
		text-align: right;

		.level-text {
			color: #f3ecbb;
		}
	}

	.flex-row-center-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-row-start-center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flex-row-end-center {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.flex-row-start-start {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.flex-row-between-start {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.flex-row-between-center {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-row-center-start {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.flex-column-start-center {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.flex-column-end-center {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.flex-column-center-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bottom-info {
		position: absolute;
		left: 0rpx;
		bottom: -1rpx;
		width: 100%;
		height: 70rpx;
		background: linear-gradient(180deg, rgba(10, 7, 27, 0) 0%, rgba(0, 0, 0, .6) 100%);
		z-index: 9;

		.top-start {
			width: 100%;
			height: 25rpx;
			box-sizing: border-box;

			.start-item {
				width: 18rpx;
				height: 18rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.start-img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.bottom-name {
			width: 100%;
			font-size: 15rpx;
			line-height: 15rpx;
			color: #fff;
			text-shadow: rgba(0, 0, 0, .3);
			margin-bottom: 10rpx;
			margin-top: 5rpx;
			box-sizing: border-box;
		}
	}




	.scroll-content-x {
		width: 100%;
		height: 100%;
		pointer-events: fill;
	}

	.scroll-content-y {
		width: 100%;
		height: 100%;
		pointer-events: fill;
	}

	.item-img {
		width: 100%;
		height: 100%;
	}

	.line-bottom {
		bottom: 0rpx;
	}

	.line-top {
		top: 0rpx;
	}


	.bottom-card-name {
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		width: 100%;
		height: 28rpx;
		font-size: 12rpx;
		line-height: 28rpx;
		background-color: rgba(0, 0, 0, .6);
		text-align: center;
		z-index: 9;
		color: #fff;
		border-radius: 0rpx 0rpx 5rpx 5rpx;

		.card-name-text {
			position: absolute;
			left: 50%;
			width: 120rpx;
			height: 100%;
			transform: translateX(-50%) scale(0.75);
		}
	}

	.main-level-box {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 28rpx;
		font-size: 16rpx;
		line-height: 28rpx;
		z-index: 13;
		color: #fff;
		text-align: right;
		box-sizing: border-box;
		padding: 0rpx 5rpx;

	}

	.empty-card {
		opacity: 0;
	}

	.confirm-btn {
		width: 250rpx;
		// height: 50rpx;
		height: 65rpx;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 24rpx;
		text-align: center;
		// background-color: #f0eeef;
		// color: #000;

		background-color: rgba(248, 239, 224, 1);
		color: #715a52;
		border-radius: 8rpx;

	}

	.bg-blur {
		bottom: 0rpx;
		padding-top: 40rpx;
		padding-bottom: 50rpx;
		// backdrop-filter: blur(15rpx);
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, .7) 80%, rgba(0, 0, 0, .8) 100%);
	}

	.pkVideo {
		position: absolute;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index: 1;
	}





	.power-box {
		position: absolute;
		left: 0rpx;
		bottom: 365rpx;
		width: 100%;
		height: 40rpx;
		z-index: 9;

		.power-inner {
			position: relative;
			width: 300rpx;
			height: 100%;
			background-image: linear-gradient(to right, rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, .5)30%, rgba(0, 0, 0, .5)70%, rgba(0, 0, 0, 0)100%);

			.line-box {
				position: absolute;
				left: 0rpx;
				width: 100%;
				height: 1rpx;
				background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0) 100%);
				opacity: 0.4;
			}

			.top-line {
				top: 0rpx;
			}

			.bottom-line {
				bottom: 0rpx;
			}

			.left-tip {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #f3e9b4;
				margin-right: 10rpx;
				height: 28rpx;
				font-weight: 700;

				.one-tip {
					align-self: flex-start;
				}

				.two-tip {
					align-self: flex-end;
				}
			}

			.right-num {
				font-size: 24rpx;
				line-height: 40rpx;
				color: #fff;
			}
		}

	}

	.card-content {
		position: relative;
		width: 100%;
		height: 100%;
		// border-radius: 6rpx;

		.bottom-info {
			background-image: none;
		}



		&::after {
			position: absolute;
			left: 0rpx;
			bottom: 0rpx;
			content: "";
			width: 100%;
			height: 40rpx;
			z-index: 2;
		}


		&::before {
			content: "";
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
			box-shadow: inset 0rpx 0rpx 2rpx rgba(0, 0, 0, .3);
			z-index: 9999;
			box-sizing: border-box;
		}
	}
</style>